<template>
  <div class="app-container">
    <el-card class="box-card">

      <el-form ref="listQuery" :model="listQuery" :inline="true">

        <el-form-item label="事件名称" prop="title">
          <el-input
            v-model="listQuery.title"
            placeholder="请输入事件名称"
            clearable
            size="small"
            style="width: 180px"
            @keyup.enter.native="getList"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="small" @click="getList">搜索</el-button>
          <el-button icon="el-icon-refresh" size="small" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>

      <el-table v-loading="loading" stripe :data="ticketList" @selection-change="handleSelectionChange">
        <!-- <el-table-column type="selection" width="55" align="center" /> -->
        <el-table-column label="#" type="index" width="80" align="center" />
        <el-table-column label="不良反应/事件名称" prop="process_name" align="center" :show-overflow-tooltip="true" />
        <el-table-column label="不安全事件分类" :show-overflow-tooltip="true" align="center">
          <template slot-scope="scope">
            {{ getClassifyName(scope.row.title) }}
          </template>
        </el-table-column>
        <el-table-column label="严重程度" :show-overflow-tooltip="true" align="center">
          <template slot-scope="scope">
            {{ formatYzcd(scope.row.form_data) }}
          </template>
        </el-table-column>

        <el-table-column label="上报时间" align="center" prop="create_time" width="180">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.create_time) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="流转节点" :show-overflow-tooltip="true" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.status === 1">未提交</span>
            <span v-if="scope.row.status === 2">已撤回</span>
            <span v-if="scope.row.status === 0">
              {{ scope.row.state_name }}
            </span>
          </template>
        </el-table-column>

        <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="180" fixed="right">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-edit"
              @click="handleView(scope.row)"
            >查看</el-button>
            <el-button
              size="mini"
              type="text"
              icon="el-icon-time"
              @click="handleCcRecord(scope.row)"
            >抄送其他部门</el-button>
          </template>
        </el-table-column>
      </el-table>

      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="queryParams.pageIndex"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </el-card>
    <HistoryDialog ref="historyDialog" />
  </div>
</template>

<script>
import { ccRecordList } from '@/api/process/ccRecord'
import { getDuration } from '@/utils/costum'
import HistoryDialog from '@/views/baqsj/components/history'
import ccRecordDialog from '@/components/CcRecord/ccDialog'
export default {
  components: { ccRecordDialog, HistoryDialog },
  data() {
    return {
      dateType: 'todo',
      users: [],
      nodeList: [],
      dialogVisible: false,
      queryParams: {},
      nodeName: '',
      total: 0,
      loading: false,
      ticketList: [],
      listQuery: {
        page: 1,
        per_page: 10,
        appType: 'baqsj'
      },
      ruleForm: {
        work_order_id: '',
        node_id: '',
        user_id: '',
        remarks: ''
      },
      rules: {
        node_id: [{ required: true, message: '请选择节点', trigger: 'change' }],
        user_id: [{ required: true, message: '请选择用户', trigger: 'change' }]
      }
    }
  },
  created() {

  },
  mounted() {
    if (this.$route.query.nodeName != '' && this.$route.query.nodeName != undefined) {
      this.nodeName = this.$route.query.nodeName
    }
    this.getList()
  },
  methods: {
    formatYzcd(val) {
      if (val) {
        const jsonObj = val
        const sjpg_shjg_text = jsonObj['sjpg_shjg_text']
        if (sjpg_shjg_text) {
          return sjpg_shjg_text
        } else {
          return '--'
        }
      } else {
        return '--'
      }
    },
    getClassifyName(val) {
      if (val != '') {
        return val.split('-')[0]
      }
      return ''
    },
    changeType(val) {
      this.getList()
    },
    resetQuery() {
      this.timeValue = ''
      this.resetForm('listQuery')
      this.getList()
    },

    getList() {
      this.loading = true
      this.listQuery.page = this.queryParams.pageIndex
      this.listQuery.per_page = this.queryParams.pageSize

      this.listQuery.appType = 'baqsj'
      ccRecordList(this.listQuery).then(response => {
        this.ticketList = response.data.data
        this.queryParams.pageIndex = response.data.page
        this.queryParams.pageSize = response.data.per_page
        this.total = response.data.total_count
        this.loading = false
      })
    },
    handleSearch(val) {
      for (var k in val) {
        this.listQuery[k] = val[k]
      }
      this.getList()
    },
    handleCcRecord(row) {
      this.$refs.ccRecordDialogRef.open(row)
    },
    handleHistoryView(row) {
      this.$refs.historyDialog.open(row.process, row.id)
    },
    handleView(row) {
      localStorage.setItem('currentApp', JSON.stringify({ name: '不安全事件系统', mid: 'baqsj' }))
      this.$router.push({ path: '/baqsj/review', query: { processId: row.process_id, workOrderId: row.work_order }})
    },
    handleSelectionChange() { },
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          inversionWorkOrder(this.ruleForm).then(response => {
            if (response.code === 200) {
              this.getList()
              this.dialogVisible = false
            }
          })
        }
      })
    }
  }
}
</script>

<style scoped></style>
